import ReactEcharts from "echarts-for-react";
import moment from "moment";
import React, { Component } from "react";
import axios from "axios";
import { Card, Row, Col, Statistic, DatePicker } from "antd";
const { RangePicker } = DatePicker;
import { newTaskStatistics } from "./service";
// @page 商家
class sevenActivity extends Component {
	state = {
		finishSum: "",
		goingSum: "",
		joinSum: "",
		beginDate: "",
		endDate: "",
		newData: {},
	};

	async componentDidMount() {
		this.getData();
	}

	getData = async () => {
		let { beginDate, endDate } = this.state;
		const res = await newTaskStatistics({
			beginDate,
			endDate,
		});

		this.setState({
			newData: res.data,
		});
	};
	changeValue = (data: any) => {
		this.setState({ beginDate: data[0], endDate: data[1] });
		this.getData();
	};

	getOption() {
		var option = {
			title: {
				text: "好友数(人)",
			},
			tooltip: {
				trigger: "axis",
			},
			legend: {
				data: ["已完成人数"],
			},
			xAxis: {
				type: "category",
				axisTick: { show: false },
				data: this.state.newData.state,
			},
			yAxis: {},
			series: {
				type: "line",
				data: this.state.newData.count,
			},
		};
		return option;
	}

	render() {
		return (
			<div className="App">
				<Card>
					<RangePicker
						picker="week"
						format="YYYY-MM-DD"
						disabledDate={(current: any) => {
							return current && current >= moment().endOf("day");
						}}
						onChange={(date: any, dateString: any) => {
							setTimeout(() => {
								this.changeValue(dateString);
							}, 0);
						}}
					/>
				</Card>
				<Card>
					<ReactEcharts
						style={{ height: "500" + "px" }}
						notMerge={true}
						lazyUpdate={true}
						theme={"theme_name"}
						option={this.getOption()}
					/>
				</Card>
			</div>
		);
	}
}

export default sevenActivity;
